<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2020/8/30
  Time: 19:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css" charset="GBK">
    <script src="${pageContext.request.contextPath}/static/jquery-3.5.1.min.js" charset="GBK"></script>
    <script src="${pageContext.request.contextPath}/static/layui/layui.js" charset="GBK"></script>
    <link href="${pageContext.request.contextPath}/static/toastr-master/toastr.min.css" rel="stylesheet"/>
    <script src="${pageContext.request.contextPath}/static/toastr-master/toastr.min.js" charset="GBK"></script>
</head>
<body style="padding: 3px">
<!--上侧搜索表单按钮组-->
<div class="layui-elem-field">
    <form class="layui-form layui-form-pane" id="searchNewsFrom">
        <div class="layui-row">
            <div class="layui-inline layui-col-md-offset1">
                <label class="layui-form-label">员工编号</label>
                <div class="layui-input-block">
                    <input type="number" name="staffId" class="layui-input" placeholder="员工编号">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="staffName" class="layui-input" placeholder="员工姓名">
                </div>
                <button type="button" data-type="reload"
                        class="layui-btn layui-btn-radius layui-btn-normal layui-icon layui-icon-search"
                        lay-submit lay-filter="searchBtn">搜索
                </button>
                <button type="reset" id="searchReset"
                        class="layui-btn layui-btn-radius layui-icon layui-icon-refresh-3">重置
                </button>
            </div>
        </div>
    </form>
</div>

<!--数据表格-->
<table class="layui-hide " id="staffTable" lay-filter="staffTable"></table>

<!--添加按钮组-->
<div class="layui-hide" id="userToolbar">
    <button type="button" class="layui-btn layui-btn-radius layui-btn-sm layui-icon layui-icon-addition" lay-event="addStaff">新增员工</button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius layui-btn-sm layui-icon layui-icon-refresh layui-anim layui-anim-scaleSpring"  lay-event="refresh"></button>
</div>

<!--数据表格右侧按钮组-->
<div class="layui-hide" id="userBar">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="modify">修改</button>
        <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="modifyPass">修改密码</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delete">离职</button>
    </div>
</div>

<%--添加员工弹出框--%>
<div class="layui-elem-field" style="display: none;border: 0" id="addStaffDiv">
    <form class="layui-form layui-form-pane" id="addStaffFrom" lay-filter="addStaffFrom">
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">员工编号</label>
                    <div class="layui-input-block">
                        <input type="text" style="display:none;" name="id">
                        <input type="text" class="layui-input" name="staffId" id="addStaffId1" placeholder="员工编号"
                               disabled>
                        <input type="text" style="display: none" name="staffId" id="addStaffId2">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">员工姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" lay-verify="required" name="staffName" class="layui-input"
                               placeholder="员工姓名">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">手机号</label>
                    <div class="layui-input-block">
                        <input type="text" name="phone" lay-verify="phone" class="layui-input" placeholder="员工手机号">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">身份证</label>
                    <div class="layui-input-inline">
                        <input type="text" name="idCard" lay-verify="identity" class="layui-input"
                               placeholder="员工身份证">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">员工状态</label>
                    <div class="layui-input-inline">
                        <select name="status" class="layui-select" selected="1" disabled>
                            <option value="1">在职</option>
                            <option value="0">离职</option>
                        </select>
                    </div>
                    <label class="layui-form-label">员工角色</label>
                    <div class="layui-input-inline">
                        <select name="roleId" class="layui-select" id="roleId"></select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">员工地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="address" class="layui-input" lay-verify="required"
                               placeholder="员工地址">
                    </div>
                    <label class="layui-form-label">员工部门</label>
                    <div class="layui-input-inline">
                        <select name="deptid" id="deptid" class="layui-select">
                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item layui-col-md5 layui-col-md-offset3">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="addStaff">提交信息</button>
                </div>
            </div>
        </div>
    </form>
</div>

<%--修改员工密码弹出框--%>
<div class="layui-elem-field" style="display: none;border: 0" id="modifyPassDiv">
    <form class="layui-form layui-form-pane" id="modifyPassFrom" lay-filter="modifyPassForm">
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">员工编号</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" name="staffId" disabled>
                        <input type="hidden" name="staffId">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">员工姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" lay-verify="required" name="staffName" class="layui-input" disabled>
                        <input type="hidden" name="staffName">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">新密码</label>
                    <div class="layui-input-block">
                        <input type="password" class="layui-input" lay-verify="required|onePass" id="onePass">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">确认新密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" lay-verify="required|twoPass" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-form-item layui-col-md5 layui-col-md-offset3">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit lay-filter="modifyStaffPass">确认修改</button>
                </div>
            </div>
        </div>
    </form>
</div>

<%--删除员工弹出框--%>
<div class="layui-elem-field" style="display: none" id="deleteStaffDiv">
    <form class="layui-form layui-form-pane" id="deleteStaffFrom">
        <input type="hidden" id="deleteStaffId">
        <h2 style="margin-left: 20px">确认离职该员工吗？</h2>
        <div class="layui-form-item layui-col-md5 layui-col-md-offset2" style="margin-top: 20px;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="deleteStaffBtn">确认离职</button>
            </div>
        </div>
    </form>
</div>

<script>
    layui.use('table', function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;

        //查询的提交事件
        form.on('submit(searchBtn)', function (data) {
            //layer.msg(JSON.stringify(data.field));
            //刷新一下table
            table.reload('staffTable', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    staffId: data.field.staffId,
                    staffName: data.field.staffName
                },
                page: {
                    curr: 1
                }
            });

            return false;
        });
        //重置时要刷新表格
        $("#searchReset").click(function () {
            showTable()
        });

        //渲染职位表格-showTable()
        function showTable() {
            table.render({
                elem: '#staffTable'
                , url: '/staffServlet/getAllStaff'//数据接口
                , toolbar: '#userToolbar'
                , even: true //开启隔行背景
                , page: true //开启分页
                , text: {
                    none: '暂无相关数据'
                }
                , cols: [[ //表头
                    {field: 'id', title: 'ID', align: 'center', hide: true}
                    , {field: 'staffId', title: '编号', align: 'center', width: '120'}
                    , {field: 'staffName', title: '姓名', align: 'center', width: '95'}
                    , {field: 'age', title: '年龄', align: 'center', width: '70'}
                    , {field: 'phone', title: '手机号', align: 'center', width: '120'}
                    , {field: 'idCard', title: '身份证', align: 'center', width: '180'}
                    , {field: 'address', title: '地址', align: 'center', width: '102'}
                    , {
                        field: 'status', title: '状态', align: 'center', width: '80', templet: function (d) {
                            if (d.status == 1) return '<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-normal">在职</button>';
                            else return '<button class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">离职</button>'
                        }
                    }
                    , {field: 'rname', title: '职位', align: 'center', width: '90'}
                    , {field: 'roleId', title: '职位ID', hide: true}
                    , {field: 'deptId', title: '部门ID', hide: true}
                    , {field: 'dname', title: '部门', align: 'center', width: '100'}
                    , {field: 'createdTime', title: '入职时间', align: 'center', width: '150'}
                    , {fixed: 'right', title: '操作', toolbar: '#userBar', align: 'center', width: '190'}
                ]]
                , limit: 10
                , limits: [3, 5, 8, 10, 20, 50]
            });
        }

        //监听头部工具栏
        table.on("toolbar(staffTable)", function (obj) {
            switch (obj.event) {
                case 'addStaff':
                    showAddStaffDiv();
                    break;
                case 'refresh':
                    showTable();
                    break;
            }
        });

        //监听右侧工具栏
        table.on('tool(staffTable)', function (obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            if (obj.event === 'modify') {
                showModifyStaffDiv(data)
            } else if (obj.event === 'delete') {
                showDeleteStaffDiv(data);
            } else if (obj.event === 'modifyPass') {
                showModifyPassDiv(data);
            }
        });

        //页面加载完成，调用的方法
        $(function () {
            //页面加载完成,初始化员工表
            showTable();
            //页面加载完成，监听添加员工表单的提交
            addStaffCheck();
            //页面加载完成，监听修改员工密码的表单提交
            modifyPass()
        });

        //添加、修改员工信息时，填充部门、职位的下拉框 发送ajax的函数
        function getSelectValue() {
            //打开添加员工弹出层后 给 角色 下拉框赋值
            $.ajax({
                url: 'roleServlet/getAllRole',
                async: false,
                type: 'post',
                success: function (data) {
                    let role = data;
                    let option = "";
                    for (let i = 0; i < role.length; i++) {
                        option += "<option value='" + role[i]['rid'] + "'>" + role[i]['rname'] + "</option>";
                    }
                    $("#roleId").html(option);
                },
                dataType: 'json'
            })
            //打开添加员工弹出层后 给 部门 下拉框赋值
            $.ajax({
                url: 'deptServlet/getAllDept',
                async: false,
                type: 'post',
                success: function (data) {
                    let roleNames = data;
                    let option = "";
                    for (let i = 0; i < roleNames.length; i++) {
                        option += "<option value='" + roleNames[i]['deptid'] + "'>" + roleNames[i]['dname'] + "</option>";
                    }
                    $("#deptid").html(option);
                },
                dataType: 'json'
            })
        }

        //打开添加员工弹出框
        function showAddStaffDiv() {
            $("#addStaffFrom")[0].reset();
            layer.open({
                type: 1,
                anim: 3,
                title: ['添加员工', 'font-size:20px'],
                content: $("#addStaffDiv"),
                offset: '100px',
                area: '700px',
                success: function () {
                    //打开添加员工弹出层后 给员工编号- <input> -赋值
                    $.ajax({
                        url: '/staffServlet/getLastStaffId',
                        async: false,
                        type: 'post',
                        success: function (result) {
                            $("#addStaffId1").val(result);
                            $("#addStaffId2").val(result);
                        },
                        dataType: 'json'
                    });
                    getSelectValue();
                }
            })
        }

        //打开修改员工弹出框
        function showModifyStaffDiv(data) {
            $("#addStaffFrom")[0].reset();
            layer.open({
                type: 1,
                anim: 3,
                title: ['修改员工信息', 'font-size:20px'],
                content: $("#addStaffDiv"),
                offset: '100px',
                area: '700px',
                success: function () {
                    //打开修改员工弹出层后 给 员工角色、员工部门 下拉框赋值
                    getSelectValue();
                    form.val('addStaffFrom', data)
                    //让表单加载select重新赋于的值
                    form.render('select');
                }
            })
        }

        //打开删除员工弹出层
        function showDeleteStaffDiv(data) {
            layer.open({
                type: 1,
                anim: 3,
                title: ['员工离职', 'font-size:20px'],
                content: $("#deleteStaffDiv"),
                offset: '100px',
                area: ['300px', '150px'],
                success: function () {
                    $("#deleteStaffId").val(data.id)
                }
            })
        }

        //打开修改密码弹出框
        function showModifyPassDiv(data) {
            $("#modifyPassFrom")[0].reset();
            layer.open({
                type: 1,
                anim: 3,
                title: ['修改员工密码', 'font-size:20px'],
                content: $("#modifyPassDiv"),
                offset: '100px',
                area: '700px',
                success: function () {
                    form.val('modifyPassForm', data)
                    /* $("#modifyPassFrom :input[name]").each(function () {
                         $(this).val(data[this.name]);
                     });*/
                }
            })
        }

        //添加员工、修改员工的表单验证和提交
        function addStaffCheck() {
            //监听提交
            form.on('submit(addStaff)', function (data) {
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url: '/staffServlet/addStaff',
                    type: 'post',
                    async: false,
                    data: data.field,
                    success: function (result) {
                        if (result != 0) {
                            showTable();
                            toastr.success('操作成功');
                            layer.closeAll('page'); //关闭所有页面层
                        } else {
                            showTable();
                            toastr.error('操作失败');
                            layer.closeAll('page'); //关闭所有页面层
                        }
                    },
                });
            });
        }

        //删除员工表单提交
        $("#deleteStaffBtn").click(function () {
            let staffId = $("#deleteStaffId").val();
            $.ajax({
                url: '/staffServlet/staffResigned',
                type: 'post',
                async: false,
                data: {id: staffId},
                success: function (result) {
                    if (result != 0) {
                        showTable();
                        toastr.success('离职成功');
                        layer.closeAll('page'); //关闭所有页面层
                    } else {
                        showTable();
                        toastr.error('离职失败');
                        layer.closeAll('page'); //关闭所有页面层
                    }
                },
                dataType: 'json'
            })
        });

        //修改员工密码表单验证和提交
        function modifyPass() {
            form.verify({
                onePass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
                , twoPass: function (value, item) { //value：表单的值、item：表单的DOM对象
                    console.log($("#onePass").val());
                    if ($("#onePass").val() != value) {
                        return '两次输入密码不一致';
                    }
                }
            });
            //监听提交
            form.on('submit(modifyStaffPass)', function (data) {
                //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
                $.ajax({
                    url: '/staffServlet/updatePassword',
                    type: 'post',
                    async: false,
                    data: data.field,
                    success: function (result) {
                        if (result != 0) {
                            showTable();
                            toastr.success('修改密码成功');
                            layer.closeAll('page'); //关闭所有页面层
                        } else {
                            showTable();
                            toastr.error('修改密码失败');
                            layer.closeAll('page'); //关闭所有页面层
                        }
                    },
                });
            });

        }
    })
</script>
</body>
<style>
    .layui-table th {
        font-weight: bold;
    }

    .layui-table-cell {
        height: 36px;
        line-height: 36px;
    }

    /*下拉框高度*/
    .layui-unselect dl {
        max-height: 120px;
    }

    #addStaffFrom {
        margin-left: 50px;
        margin-top: 10px;
    }

    #modifyPassDiv {
        margin-left: 50px;
        margin-top: 10px;
    }
</style>
</html>

